<template>
<div class="pane_friend">
    <el-dialog
        draggable
        v-model="dialogVisible"
        title="添加朋友"
        width="800"
        :before-close="handleClose"
    >
        <AddFriend ref="addFriendRef" @data-request="disableAddFriend"></AddFriend>
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" :disabled="enterDisable" @click="enterAddFriend">
            确认添加
            </el-button>
        </div>
        </template>    
    </el-dialog>
    <div class="search_form">
        <el-input v-model="username" placeholder="请输入用户账号" style="width: 300px;" clearable>
            <template #append>
                <el-button :icon="Search" @click="searchAccountUser"/>
            </template>
        </el-input>
    </div>
    <div class="table_pane">
        <div class="table_body">
            <div class="icon_group">
                <div class="icon_item">
                    <el-tooltip
                        class="box-item"
                        effect="dark"
                        content="添加朋友"
                        placement="top"
                    >
                        <el-icon><Plus @click="dialogVisible = true"/></el-icon>
                    </el-tooltip>
                </div>
                <div class="icon_item">
                    <el-tooltip
                        class="box-item"
                        effect="dark"
                        content="刷新表格"
                        placement="top"
                    >
                        <el-icon><RefreshRight @click="RefreshClick" /></el-icon>
                    </el-tooltip>
                </div>
            </div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column  show-overflow-tooltip fixed prop="friendUid" label="朋友id" width="380" />
                <el-table-column  show-overflow-tooltip prop="friendNote" label="朋友备注" width="180" />
                <el-table-column  show-overflow-tooltip prop="createTime" label="添加时间" width="250" />
                <el-table-column fixed="right" label="操作" min-width="120">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="sendMessage(scope.$index, scope.row)">
                        发送消息
                    </el-button>
                     <el-button link type="primary" size="small" @click="transferAccount(scope.$index, scope.row)">
                        转账
                    </el-button>
                    <el-button link type="primary" size="small">好友详情</el-button>
                </template>
                </el-table-column>
            </el-table>
            <div class="page_pane">
                <el-pagination
                    :page-size="tableSize"
                    layout="total, prev, pager, next"
                    :total="tableTotal"
                    @prev-click="prevClick"
                    @next-click="nextClick"
                    @current-change="currentChange"
                />
            </div>
        </div>
    </div>
    <!-- 发送消息开始 -->
     <div class="send_msg_pane">
          <el-dialog v-model="dialogSendMsg" :title="chatBox" width="800" draggable>
            <div class="msg_box">
                <SendMessageBox ref="messageBox"></SendMessageBox>
            </div>
            <template #footer>
                <div>
                    <el-input
                        v-model="messageText"
                        maxlength="30"
                        placeholder="请输入聊天内容"
                        show-word-limit
                        type="textarea"
                    />
                </div>
                <div class="button_send">
                    <el-button type="success" :disabled="isSend" @click="enterSend">发送</el-button>
                </div>
            </template>
        </el-dialog>
     </div>
     <!-- 发送消息结束 -->
      <div>
        <el-dialog v-model="dialogTransfer" :title="chatBox" width="800" draggable>
            <div>
                <PayAccountSearch ref="accountSearch" @transferRequest="transferRequest"></PayAccountSearch>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogTransfer= false">取消</el-button>
                    <el-button type="primary" :disabled="isTransferDisable" @click="enterTransfer">
                        确认转账
                    </el-button>
                </div>
            </template>
        </el-dialog>
      </div>
</div>
</template>
<script setup>
import { nextTick, ref,watch } from 'vue';
import AddFriend from '@/components/friend/AddFriend.vue';
import { userApi } from '@/api/apis/user';
import { ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue';
import SendMessageBox from '@/components/message/SendMessageBox.vue';
import PayAccountSearch from '@/components/account/PayAccountSearch.vue';
import { accountPayApi } from '@/api/apis/pay'
import { messageApi } from '@/api/apis/message';

//消息内容
const messageText=ref('');
const pageNum=ref(1);
const pageSize=ref(10);
const tableData=ref([]);
const tableTotal=ref(0);
const tableSize=ref(10);
const chatBox=ref('');
const dialogTransfer=ref(false);
//消息盒子组件
const messageBox=ref(null);
const accountSearch=ref(null);
//转账是否准备就绪
const isTransferDisable=ref(false);
//发送消息弹框
const dialogSendMsg=ref(false);

//用户信息
const userInfo=ref(null);

const currentChange=(num)=>{
    pageNum.value=num;
    pageData(num);;
}
//上一页
const prevClick=(num)=>{
    pageNum.value=num;
    pageData(num);
}
//下一页
const nextClick=(num)=>{
    pageNum.value=num;
    pageData(num);
}
const reqData=ref(null);
const isSend=ref(true);
//监听是否发送消息
watch(messageText, (newVal, oldVal) => {
  if (newVal && newVal!=='') {
    isSend.value=false;
  }else{
    isSend.value=true;
  }
})
//发送消息
const enterSend=()=>{
    messageApi.sendMessage({toUid:userInfo.value.friendUid,msg:messageText.value}).then((res)=>{
        if(res && res.code==0){
            messageText.value='';
             return ElMessage({
                message: res.msg,
                type: 'success',
            })
            
        }
    })
}

//转账请求确认
const transferRequest=(data)=>{
    if(data.code){
        reqData.value=data.data;
        console.log(reqData.value);
        isTransferDisable.value=false;
    }else{
        isTransferDisable.value=true;
    }
}
//刷新数据
const RefreshClick=()=>{
    pageData(pageNum.value);
}
//发送消息
const sendMessage=(index,data)=>{
    chatBox.value='与'+data.friendNote+'的聊天框';
    dialogSendMsg.value=true;
    userInfo.value=data;
    if(messageBox.value){
        messageBox.value.setUserInfo(userInfo.value);
    }
   
}

//转账
const transferAccount=(index,data)=>{
    transferTitle.value='与'+data.friendNote+'的转账';
    dialogTransfer.value=true;
    userInfo.value=data;
    if(accountSearch.value){
        accountSearch.value.setFriendModel(userInfo.value.friendUid);
    }
}
//监听账户搜索组件
watch(accountSearch, (newVal, oldVal) => {
  if (newVal) {
    console.log('组件引用已设置，组件加载完成'+newVal);
    accountSearch.value.setFriendModel(userInfo.value.friendUid);
  }
})
//监听消息发送组件
watch(messageBox, (newVal, oldVal) => {
  if (newVal) {
    messageBox.value.setUserInfo(userInfo.value);
  }
})
const transferTitle=ref('');
const dialogVisible = ref(false);
const addFriendRef=ref(null);
const enterDisable=ref(true);
const disableAddFriend=(req)=>{
    if(req.code){
        enterDisable.value=false;
    }else{
        enterDisable.value=true;
    }
}
nextTick(()=>{
   pageData(1); 
})
const pageData=(num)=>{
    userApi.getFriendList({pageNum:num,pageSize:pageSize.value}).then((res)=>{
        if(res && res.code==0){
           tableTotal.value=res.data.total;
           tableData.value=res.data.tList;
        }
    })
}
//确认添加朋友
const enterAddFriend=()=>{
    let uid=addFriendRef.value?.getFriendUid();
    if(!uid){
        return ElMessage({
            message: '未查找用户，请先查找用户',
            type: 'warning',
        })
    }
    userApi.addUserFriend({friendUid:uid}).then((res)=>{
        if(res || res.code==0){
            dialogVisible.value=false;
            RefreshClick();
            return ElMessage({
                message: '朋友添加成功',
                type: 'success',
            })
        }
    })
    console.log(uid);
}
//确认转账
const enterTransfer=()=>{
    accountPayApi.transferAccount(reqData.value).then((res)=>{
        if(res && res.code==0){
            dialogTransfer.value=false;
             return ElMessage({
                message: res.msg,
                type: 'success',
             })
        }else{
             ElMessage({
                message:  res.msg,
                type: 'warning',
            })
        }
    })
}

</script>
<style scoped>
.pane_friend{
    width: 100%;
    height: 100%;
    padding: 10px;
    margin: 0;
    box-sizing: border-box;
    .search_form{
        padding: 20px 10px;
        box-sizing: border-box;
        margin: 10px 0px;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
    }
    .msg_box{
        min-height: 300px;
    }
    .button_send{
        margin-top: 8px;
    }
    .table_pane{
        padding-right: 20px;
        box-sizing: border-box;
        .table_body{
            border: 1px solid #dcdfe6;
            padding: 10px 10px 40px 10px;
            box-sizing: border-box;
            .icon_group{
                box-sizing: border-box;
                padding-left: 5px;
                display: inline-flex;
                .icon_item{
                    margin-right: 5px;
                }
            }
            .page_pane{
                padding-left: 20px;
                margin-top: 10px;
                box-sizing: border-box;
            }
        }
}
}
</style>